<template>
  <div class="right">
    <van-button round type="info" :loading="btnlodaing" v-if="value" @click="isfollow">
      <span class="icon">+</span> 关注
    </van-button>
    <van-button round type="default" :loading="btnlodaing" v-else @click="isfollow">
      <span style="color:#000">已关注</span>
    </van-button>
  </div>
</template>
<script>
import { isFollowed_api, noFollowed_api } from "@/api/user.js";
import { GET_TOKEN } from "@/utils/storage.js";
export default {
  // model: {
  //   prop: "is_followed",
  //   event: "ff", // 实际上触发的是input事件
  // },
  props: {
    // is_followed: {
    //   type: Boolean,
    //   required: true,
    // },
    value: {
      type: Boolean,
      required: true,
    },
    aut_id: {
      type: [String, Object, Array, Number],
      required: true,
    },
  },
  data() {
    return {
      btnlodaing: false,
    };
  },
  methods: {
    // 是否关注
    async isfollow() {
      if (GET_TOKEN("userId") == this.aut_id) {
        return this.$toast("不能关注自己");
      }
      this.btnlodaing = true;
      // this.$emit("ff", !this.is_followed);
      this.$emit("input", !this.value);
      //   this.is_followed = !this.is_followed;
      if (!this.value) {
        // 关注
        const { data: res } = await isFollowed_api(this.aut_id);
        // console.log(res, this.is_followed, 1111);
      } else {
        // 取消关注
        const { data: res } = await noFollowed_api(this.aut_id);
        // console.log(res, this.is_followed, 2222);
      }
      this.btnlodaing = false;
    },
  },
};
</script>
<style lang='less' scoped>
.right {
  .van-button {
    width: 200px;
    height: 60px;
    .van-button__text {
      color: #fff;
      .icon {
        font-size: 40px;
      }
    }
  }
}
</style>